<template>
  <div 
    v-if="modelValue" 
    :class="[
      'el-form-item__error',
      { 'general-error': isGeneral }
    ]"
  >
    {{ modelValue }}
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  isGeneral: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.el-form-item__error {
  color: var(--el-color-danger);
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
}

.general-error {
  position: static;
  margin-bottom: 16px;
  padding: 8px 12px;
  background-color: var(--el-color-danger-light-9);
  border-radius: 4px;
  border: 1px solid var(--el-color-danger-light-7);
}
</style>
